<template>
  <div class="recommend">
    <div class="title"><img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"> 猜你喜欢</div>
    <ul class="recommend-list">
      <router-link tag="li" :to="'/detail/'+item.id" class="recommend-item border-bottom"
                   v-for="item in recommendList"
                   :key="item.id">
        <div class="left">
          <img :src="item.img" alt="">
        </div>
        <div class="right">
          <p class="location">{{item.location}}</p>
          <p class="rating">
            <rating :score="item.score"></rating>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>{{item.rating}}条评论</span>
          </p>
          <p class="price">&yen;{{item.price}}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import Rating from '@/common/Rating'

  export default {
    props: {
      recommendList: Array
    },
    components: {
      Rating
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .recommend
    .title
      padding .24rem 0 .26rem
      background #f5f5f5
      font-size .25rem
      img
        margin-left: .3rem
        width: .3rem
        height: .3rem
        vertical-align bottom
    .recommend-list
      margin-left .24rem
      .recommend-item
        padding .2rem 0
        display flex
        .left
          flex 0 0 2rem
          height: 2rem
          img
            display block
            width: 2rem
            height: 2rem
        .right
          flex 1
          padding-left .2rem
          .location
            margin-top .26rem
            font-size .32rem
            line-height: .44rem

          .rating
            margin-top .14rem
            font-size .3rem
          .price
            margin-top .22rem
            font-size .4rem
            color #ff8300
</style>
